<template>
  <view class="lang">
    <form @submit="submit">
			<view class="u-flex u-row-between">
				<view>
					<view v-for="(item,index) in list" class="lang-item">
						<view class="lang-text" style="width:600rpx">{{ item.lang }}</view>
					</view>
				</view>
				<u-radio-group v-model="current" :wrap="true">
					<view v-for="(item, index) in list" :key="index" class="lang-item">
						<u-radio		
							:name="item.lang"
							@change="radioChange(item,index)"
						 >			
						</u-radio>
					</view>
					</u-radio-group>
			</view>		
    </form>
    <view class="lang-button u-m-t-40">
      <u-button type="primary" @click="submit">{{$t('mine.btn_save')}}</u-button>
    </view>
  </view>
</template>

<script>
	
import i18n from "@/lang/index.js";
import userList from '@/commen/tim/user';
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
  data() {
    return {
      form: {
        lang: '',
      },
      iconStyle: {
        fontSize: '38rpx',
        color: '#646466',
        display: 'flex'
      },
      list: [{
        lang: '跟随手机系统语言',
      },
        {
          lang: '中文',
        },
        {
          lang: 'English',
        },
        {
          lang: 'русский',
        }
      ],
      current: '中文',
	  langType:0,
    }
  },

  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.$t('mine.select_lang')
    });
    this.loaded();
  },
  onShow() {
    this.loaded();
  },
  components: {},
  computed: {
    i18n() {
      return this.$t('mine')
    }
  },
  methods: {
    loaded() {
      let that = this;
      that.current = uni.getStorageSync('lang') || '中文';
      this.$http.get('/client/user/account/lang/get', {}).then(res => {
        if (res == 1) {
          that.current = '中文';
        } else if (res == 2) {
          that.current = 'English';
        } else if (res == 3) {
          that.current = 'русский';
        }
      });
    },
    radioChange(item,index) {
			this.current = item.lang
			this.langType = index
    },
    submit() {
      this.$http.post('/client/user/account/lang/save', {
        lang: this.langType
      }).then(res => {
        uni.showToast({
          title: this.$t('mine.save_success'),
        });
        if(this.current == '中文' || this.current == 'English' || this.current== 'русский') {
					i18n.global.locale = this.current;
					uni.setStorageSync('lang', this.current); 
				 }  
        else {
          this.changLang();
        }	
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/mine/index'
          });
        }, 1500);
      });
    },
    changLang() {
      let language = uni.getSystemInfoSync().language || '';
      let lang = language.split('-')[0] || '';
      if (lang == 'zh') {
         i18n.global.locale = '中文';
        uni.setStorageSync('lang', '中文');
      } else if (lang == 'ru') {
         i18n.global.locale = 'русский';
        uni.setStorageSync('lang', 'русский');
      } else {
         i18n.global.locale = 'English';
        uni.setStorageSync('lang', 'English');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.lang {
  height: 100vh;
  background-color: #ffffff;
}
.lang-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #dde0e0;
}
.lang-button {
  padding: 0 80rpx;
}
@keyframes appear {
  0% { opacity: 0}
  25% { opacity: 0.5}
  100% {opacity: 1}
}

</style>
